<template>
  <div id="scenic">
    <div class="main">
      <p class="scenic-title">景点简介</p>
      <div class="center-menus no-scrollbar" ref="center-menus">
        <div
          class="center-menu"
          v-for="(centerMenu, key) in centerMenus"
          :key="key"
        >
          <div class="center-menu_wrapper" @click="handleCenterMenuClick(key)">
            <span
              class="center-menu_name"
              :class="{ 'center-menu_name--active': key === centerActive }"
              >{{ centerMenu.name }}</span
            >
            <div class="center-menu_block" v-show="key === centerActive"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="scenic-describe">
      <div v-for="(item, index) in bottomMenus" :key="index">
        <img :src="item.icon" width="90%" />
        <p>{{ item.describe }}</p>
      </div>
    </div>
  </div>
</template>

<script>
const $ = require("jquery");
export default {
  data() {
    return {
      centerActive: 0,
      bottomMenus: [],
      centerMenus: [
        {
          key: "0",
          name: "政策设施",
          chidren: [
            {
              describe: "烟雨楼是电视剧《还珠格格》里漱芳斋的取景地",
              icon: require("@/assets/img/bssz.jpg")
            },
            {
              describe: "烟雨楼是电视剧《还珠格格》里漱芳斋的取景地",
              icon: require("@/assets/img/bssz2.jpg")
            },
            {
              describe: "烟雨楼是电视剧《还珠格格》里漱芳斋的取景地",
              icon: require("@/assets/img/bssz.jpg")
            },
            {
              describe: "烟雨楼是电视剧《还珠格格》里漱芳斋的取景地",
              icon: require("@/assets/img/bssz2.jpg")
            }
          ]
        },
        {
          key: "1",
          name: "特色玩法"
        },
        {
          key: "2",
          name: "游玩贴士"
        }
      ]
    };
  },
  mounted() {
    this.centerActive = 0;
    this.bottomMenus = this.centerMenus[0].chidren;
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      let ele = document.querySelector(".main");
      if (ele) {
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        let offsetTop = 153; // document.querySelector("").offsetTop;
        this.isHeaderFixed = scrollTop > offsetTop ? true : false;
      }
    },
    handleCenterMenuClick(active) {
      this.centerActive = active;
      this.bottomMenus = this.centerMenus[active].chidren;
      // scroll action
      let root = $(".center-menus");
      let currentChild = $(".center-menu").eq(active);
      let rootWidth = root.outerWidth();
      let currentChildWidth = currentChild.outerWidth();
      let scrollWidth = root.scrollLeft();
      let offsetWidth = currentChild.position().left;
      let offsetLeft =
        offsetWidth + currentChildWidth - rootWidth + scrollWidth;
      if (offsetWidth > rootWidth - currentChildWidth) {
        root.animate({ scrollLeft: offsetLeft }, 200);
      } else if (offsetWidth < 0) {
        root.animate({ scrollLeft: scrollWidth + offsetWidth }, 200);
      }
    }
  }
};
</script>

<style lang="less">
p {
  margin: 0;
  padding: 0;
}
#scenic {
  .main {
    width: 100%;
    padding: 15px 0;
    position: fixed;
    width: 100%;
    background: #fff;

    .scenic-title {
      text-align: center;
      margin: 5px 0 10px 0;
      color: #000;
      font-size: 17px;
      font-weight: 600;
    }

    .center-menus {
      position: relative;
      overflow-x: scroll;
      white-space: nowrap;
      border-bottom: 1px solid #e4e4e4;

      .center-menu {
        display: inline-block;
        /*width: 80px;*/
        width: 30%;

        .center-menu_wrapper {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .center-menu_icon {
            width: 40px;
            height: 40px;
          }

          .center-menu_name {
            font-size: 12px;
            color: #333333;
            margin-top: 8px;
            margin-bottom: 15px;
          }

          .center-menu_name--active {
            font-size: 14px;
            color: #333333;
            font-weight: 600;
            margin-top: 8px;
            margin-bottom: 15px;
          }

          .center-menu_block {
            width: 29px;
            height: 5px;
            background: #062dff;
          }
        }
      }
    }
  }
  .scenic-describe {
    padding-top: 80px;
    text-align: center;
    p {
      width: 90%;
      font-size: 14px;
      padding: 8px 0;
      color: #8a8a8a;
    }
  }
}
</style>
